@using System.Globalization
@*
    The 'using' directive makes System.Globalization available to 
    the component. System.Globalization provides a method for 
    converting a string into title case (capitalizes the first 
    letter of every word in a string), which is used to convert a 
    a string into title case for a heading.
*@

@*
    Heading text is rendered by evaluating the headingText field. 
    The font-style of the heading is rendered by evaluating the 
    headingFontStyle field.
*@
<h1 style="font-style:@headingFontStyle">@headingText</h1>

<form>
    <div>
        @*
            A check box sets the font style and is bound to the 
            italicsCheck field.
        *@
        <input type="checkbox" id="italicsCheck" 
               @bind="italicsCheck" />
        <label class="form-check-label" 
            for="italicsCheck">Use italics</label>
    </div>

    @*
        When the form is submitted, the onclick event executes 
        the UpdateHeading method.
    *@
    <button type="button" class="btn btn-primary" @onclick="UpdateHeading">
        Update heading
    </button>
</form>

@code {
    private static TextInfo tinfo = CultureInfo.CurrentCulture.TextInfo;
    private string headingText = 
        tinfo.ToTitleCase("welcome to blazor!");
    private string headingFontStyle = "normal";
    private bool italicsCheck = false;

    // When UpdateHeading is executed, italicsCheck determines 
    // the value of headingFontStyle to set the font style of the 
    // heading.
    public void UpdateHeading()
    {
        headingFontStyle = italicsCheck ? "italic" : "normal";
    }
}
